{% extends 'base.html' %}
{% block extra-head %}

<script>
	jQuery.noConflict();
	//funcion que hace una llamada ajax a la pagina de registro
	function irRegistro()
	{
		jQuery("#contenidoInicio").html('Cargando.. <img src="/img/ajax-loader.gif" />');
		jQuery.post('irRegistro/',	
				function(data) {
					jQuery('#contenidoInicio').html(data);
		});
	}
	function calcular()
	{
		jQuery("#contenidoInicio").html('Calculando.. <img src="/img/ajax-loader.gif" />');
		jQuery.post('calcular/', 
				{
				distancia: jQuery('#distancia').val(),
				horas: jQuery('#horas').val(),
				minutos: jQuery('#minutos').val(),
				segundos: jQuery('#segundos').val(),
				},	
				function(data) {
					jQuery('#contenidoInicio').html(data);
		});
	}
</script>
{% endblock %}
{% block contenido %}
<div style="width:50%;float:left;background:white; width: 35%; margin-top: 15px;">
	<div style="margin-top: 15px" >
		<div style="margin-top:15px" id="dialogform">	
		<form name="formCalculo" action="/calcular/" method="post" >
		<fieldset>
			<legend>Calcula tu ritmo en minutos el kilometro</legend>
			<p><label for="distancia">Distancia: </label> <input id="distancia" type="text" id="distancia" /> metros </p> 
			<p>Tiempo:
				<input id="horas" type="text" name="horas" size="2" /> horas
				<input id="minutos" type="text" name="minutos" size="2" /> mins
				<input id="segundos" type="text" name="segundos" size="2" /> segs
			</p>
			<p class="submit" ><input type="button" value="Calcular" onclick="javascript:calcular();" /></p>
		</fieldset>
		</form>
		</div>
	</div>
	<div>
		Eres usuario
		Siendo usuario podras guardar todos tus datos, realizar graficas estadisticas, etc
		<div style="margin-top:15px" id="dialogform">	
		<form name="formLogin" action="/login/" method="post" >
		<fieldset>
			<legend>Acceder</legend>
			<p><label for="email">Email: </label>
			<input id="email" type="text" name="email" /></p>
			<p><label for="passw">Password: </label> 
			<input id="passw" type="password" name="passw" /></p> 
			<p class="submit" ><input type="submit" value="Acceder" /></p>
		</fieldset>
		</form>
		</div>
		<p>
		Si no lo eres, REGISTRATE (enlace) y disfruta de todas las ventajas
		<a href="#" onclick="javascript:irRegistro();">Registrate</a>
	</div>
</div>
<div id="contenidoInicio" style="width:50%;float:right;background:white; width: 65%; margin-top: 15px;" >
<p>
	<div style="margin-top: 30px; margin-left: 15px;" class="ui-widget">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
				<strong>Error:</strong> La constraseNIa introducida no es correcta.</p>
			</div>
		</div>
</p>
</div>
{% endblock %}